<template>
	<!-- <div v-if="isShow" :id="echartId"  ref="Echarts" style="overflow: hidden;min-height: 120px"></div> -->
	<div v-if="isShow" :id="echartId" ref="Echarts" style="overflow: hidden" :style="`height:${isInCard ? '120' : '300'}px`"></div>
	<el-scrollbar v-else><el-empty description="暂无数据" :image-size="100" /></el-scrollbar>
</template>
<script>
	import { defineComponent, toRefs, reactive, onMounted, ref, watch, onActivated } from 'vue';
	import * as echarts from 'echarts';
	import { toThousands } from '@/utils/number-util';
	export default defineComponent({
		name: 'BarEchat',
		props: {
			echartData: Object,
			echartId: String,
			isInCard: {
				//  是否在card中展示
				type: Boolean,
				required: false,
				default: false,
			},
		},
		setup(props) {
			let isShow = ref(true);
			let seriesData = ref([]);
			const state = reactive({
				option: {},
				max: null,
				min: null,
			});
			const renderEchartBar = () => {
				state.option = {
					tooltip: {
						trigger: 'axis',
						confine: true,
						show: props.echartData.isShow != undefined && props.echartData.isShow == 0 ? false : true,
						padding: 10,
						extraCssText: 'width:120px;white-space:pre',
						formatter: params => {
							// console.log(params)
							let yData = props.echartData.yData;
							let templete = '';
							let dataIndex = params[0].dataIndex; //当前点击的柱子序号
							templete = props.echartData.xLable[dataIndex] ? props.echartData.xLable[dataIndex] + '\n' : '';
							for (let i = 0; i < yData.length; i++) {
								let item = yData[i];
								let name = item.label ? item.label[dataIndex] : item.name;
								name = name ? name : '- ';
								let nameString = item.data[dataIndex] ? name + `: ` + toThousands(item.data[dataIndex]) + (item.unit ? item.unit : '') : name + `: -`;
								templete += nameString;
								templete += i != yData.length - 1 ? '\n' : '';
							}
							return templete;
						},
					},
					color: ['#C09F88'],
					grid: {
						//以div为中心 向右缩进30%
						right: '2%',
						left: props.echartData.xData.length > 10 ? '5%' : '0%',
						top: '18%',
						bottom: '5%',
						containLabel: true,
					},
					// dataZoom: [{
					//       // start: 0,//默认为0
					//       // end: 100,//默认为100
					//       type: 'slider',
					//       show: true,
					//       // xAxisIndex: [0],
					//       handleSize: 0,//滑动条的 左右2个滑动条的大小
					//       startValue: 0, // 初始显示值
					//       endValue: 20, // 结束显示值
					//       height: 20,//组件高度
					//       left: '5%', //左边的距离
					//       right: '5%',//右边的距离
					//       bottom: -10,//底边的距离
					//       // borderColor: "#000",
					//       fillerColor: '#409eff',
					//       borderRadius: 5,
					//       backgroundColor: '#eee',//两边未选中的滑动条区域的颜色
					//       showDataShadow: false,//是否显示数据阴影 默认auto
					//       showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
					//       realtime: true, //是否实时更新
					//       filterMode: 'filter',
					//   }
					// ],
					xAxis: [
						{
							type: 'category',
							data: props.echartData.xData,
							axisLine: {
								lineStyle: {
									color: '#cfd1d3', // 坐标刻度线
									width: '0.5',
								},
							},
							axisLabel: {
								interval: 0, // 强制让所有的字段展示
								rotate: props.echartData.xData.length > 8 ? 30 : 0, // 将字段旋转30度
								// show:true,
								textStyle: {
									color: '#333333', // 标签文字
								},
							},
							axisTick: {
								//Y轴刻度线
								show: false,
								alignWithLabel: true,
							},
						},
					],
					yAxis: {
						min: state.min, //最小百分比
						max: state.max, //最大百分比
						type: 'value',
						splitNumber: state.max ? 0 : 4,
						axisLabel: {
							show: false,
							// inside:true,        // 标签刻度朝内
							// margin:200,           // 清除默认间距
							interval: 4,
							// minInterval:1000,
							// maxInterval: 20000,
							// padding:[20,10,0,0], // 右边内边距10
							textStyle: {
								align: 'right', // 文字右对齐
								color: '#333333',
								fontWeight: '600',
							},
						},
						splitLine: {
							show: true,
							length: 4,
							lineStyle: {
								type: 'dashed', //背景线条设置
								color: '#EAEBEB',
							},
						},
						axisLine: {
							lineStyle: {
								color: '#EAEBEB',
							},
						},
						axisTick: {
							//Y轴刻度线
							show: false,
							alignWithLabel: true,
						},
					},
					series: seriesData.value,
				};
			};
			const initeCharts = () => {
				let myChart = echarts.init(document.getElementById(props.echartId));
				// 绘制图表
				myChart.setOption(state.option);
				window.addEventListener(
					'resize',
					() => {
						myChart.resize();
					},
					true,
				);
			};
			const packageSeriesData = () => {
				seriesData.value = [];
				if (props.echartData.yData && props.echartData.yData.length > 0) {
					props.echartData.yData.forEach(function (item) {
						if (item.isShow) {
							let series = {
								name: item.name,
								data: item.data,
								type: item.type,
								barWidth: item.isShow ? '10' : '0',
								barMaxWidth: '10',
								barMinWidth: '0',
								barGap: '0',
								showBackground: false,
								itemStyle: {
									normal: {
										//这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
										barBorderRadius: [2, 2, 2, 2],
										label: {
											confine: true,
											show: item.isShow ? true : false, //开启数值显示显示
											position: 'top', //在上方显示
											formatter: function (params) {
												if (params.value && params.value > 0) {
													return toThousands(params.value) + (item.unit ? item.unit : '');
												} else {
													return '';
												}
											},
											textStyle: {
												//数值样式
												color: '#C09F88',
												fontSize: 12,
											},
										},
									},
								},
								backgroundStyle: {
									color: 'rgba(255, 255, 255, 0.1)',
								},
							};
							seriesData.value.push(series);
						}
					});
					if (props.echartData.max) {
						state.max = props.echartData.max;
						state.min = props.echartData.min;
					}
					renderEchartBar();
				}
			};
			onMounted(() => {});
			onActivated(() => {
				let myEchart = document.getElementById(props.echartId);
				if (myEchart) {
					myEchart.removeAttribute('_echarts_instance_');
					setTimeout(() => {
						initeCharts();
					}, 200);
				}
			});
			watch(
				() => props.echartData,
				(val, preVal) => {
					//val为修改后的值,preVal为修改前的值
					console.log('message', val, preVal);
					if (!val || (val && !val.yData)) {
						isShow.value = false;
					} else {
						isShow.value = true;
						packageSeriesData();
						setTimeout(() => {
							initeCharts();
						}, 600);
					}
				},
				{
					//如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
					//那么首次执行，val为默认值,preVal为undefined
					immediate: true,
					//这个参数代表监听对象时，可以监听深度嵌套的对象属性
					//比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
					deep: true,
				},
			);
			return {
				isShow,
				seriesData,
				...toRefs(state),
			};
		},
	});
</script>

<style lang="scss" scoped></style>
